<template>
  <div>
    <el-card class="content-bg">
      <div class="flex-center mb-20">
        <div class="bolder font20 mr-20">{{`${today}就餐统计情况`}}</div>
        <el-button type="primary" @click="handleSearch">刷新</el-button>
      </div>
      <div v-for="(item,index) in dataList" :key="index">
        <div class="flex-center mb-10">
          <div class="w1">{{item.dishName}}</div>
          <div class="w2">{{convertGearFromValue(item.timeRange)}}</div>
          <div class="w3">总点单数：{{item.totalOrderCount}}</div>
          <div class="w3">总打包数：{{item.totalPickCount}}</div>
          <el-button type="text" @click="item.isFold=!item.isFold">{{item.isFold?'展开':'收起'}}</el-button>
        </div>
        <div v-if="item.list && item.list.length>0 && !item.isFold" style="padding-left: 30px">
          <div class="flex-center gray">
            <div class="w2">点餐人</div>
            <div class="w2">堂食数量</div>
            <div class="w2">打包数量</div>
            <div class="w2">总数</div>
          </div>
          <div class="flex-center" v-for="(row,idx) in item.list" :key="index">
            <div class="w2">{{row.userName}}</div>
            <div class="w2">{{row.orderCount - row.pickCount}}</div>
            <div class="w2">{{row.pickCount}}</div>
            <div class="w2">{{row.orderCount}}</div>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
    </el-card>
  </div>
</template>

<script>

import {ORDERING_GET_EXPORT_FROM_CHIEF, ORDERING_GET_GEARS_LIST} from "@/assets/const/api";
import {Validate} from "js-utils/validate";

export default {
  name: "mealManager",
  mixins: [],
  components: {},
  props: {},
  data () {
    return {
      dataList:[],
      today:'',
      gearList:[],
    }
  },
  computed: {
    userInfo(){
      return this.$store.state.userInfo||{};
    },
    convertGearFromValue:function (){
      return (val)=>{
        if (Validate.isEmpty(this.gearList)){
          return '-';
        }
        let gear = this.gearList.find(v=>v.value === val)
        if (gear){
          return gear.name
        }
        return '-'
      }
    },
  },
  watch: {},
  created() {
    let todayDate = new Date();
    this.today = this.date2String(todayDate);
    this.getGears();
    this.handleSearch();
  },
  mounted () {},
  methods:{
    getGears(){
      this.$http.get(ORDERING_GET_GEARS_LIST).then(res=>{
        if(res.code === 200){
          this.gearList = res.data||[]
        }
      })
    },

    handleSearch(){
      this.$http.get(ORDERING_GET_EXPORT_FROM_CHIEF).then(res=>{
        let data = res.data ||[]
        let result = [];
        let dishMap = {};
        data.forEach(order => {
          const dishId = order.dishId;
          // 如果 dishId 已存在于 dishMap 中，更新该菜品的统计数据
          if (dishMap[dishId]) {
            dishMap[dishId].totalOrderCount += order.orderCount;
            dishMap[dishId].totalPickCount += order.pickUpCount;
            dishMap[dishId].list.push({
              userName: order.userName,
              pickCount: order.pickUpCount,
              orderCount: order.orderCount
            });
          } else {
            // 否则，创建新的菜品条目
            dishMap[dishId] = {
              dishName: order.dishName,
              dishId: dishId,
              totalOrderCount: order.orderCount,
              totalPickCount: order.pickUpCount,
              timeRange: order.timeRange,
              isFold:false,
              list: [{
                userName: order.userName,
                pickCount: order.pickUpCount,
                orderCount: order.orderCount
              }]
            };
          }
        });
        for (let key in dishMap) {
          result.push(dishMap[key]);
        }
        this.dataList = result;
      });

    },
    date2String(nowDate) {
      let year = nowDate.getFullYear()
      let month = nowDate.getMonth() + 1
      let day = nowDate.getDate()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day
      return year + '-' + month + '-' +day
    },
  }
}
</script>

<style scoped lang="scss">
.bg{
  background-color: white;
  padding: 20px;
}
.w1{
  width: 26%;
}
.w2{
  width: 100px;
}
.w3{
  width: 200px;
}
.content-bg{
  //width: 50%;

}
</style>